<template>
    <div class="dialog">
        <div class="dialog-con noticeContainer">
            <p>打款通知</p>
            <div class="noticeInfomation"> 
                <el-form :model="ruleForm"  label-position="right" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm" :inline="true">
                <el-form-item label="打款日期" prop="name">
                   <el-date-picker
                        size="medium"
                        v-model="ruleForm.date"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd" >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="打款公司" prop="accreditLevel" >
                    <el-select v-model="ruleForm.companyName" placeholder="请选择"  size="medium">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打款银行" prop="name">
                    <el-input v-model="ruleForm.name"  size="medium"></el-input>
                </el-form-item>
                <el-form-item label="打款金额" prop="name">
                    <el-input v-model="ruleForm.name"  size="medium"></el-input>
                </el-form-item>
                 <el-form-item label="剩余金额" prop="name">
                    <el-input v-model="ruleForm.name"  size="medium"></el-input>
                </el-form-item>
                <el-form-item label="收款公司">
                    <el-input v-model="ruleForm.supplyName"  size="medium"></el-input>
                </el-form-item>
                <el-form-item label="开户行">
                    <el-input v-model="ruleForm.supplyAccountName"  size="medium"></el-input>
                </el-form-item>
                <el-form-item label="收款账号">
                    <el-input v-model="ruleForm.supplyAccount"  size="medium"></el-input>
                </el-form-item>
                <el-form-item label="打款类型" prop="name">
                    <el-select v-model="ruleForm.remitType" placeholder="请选择"  size="medium">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width:100%;text-align:center">
                    <el-button type="primary" @click="submitForm('ruleForm')" size="medium" style="margin-right:10px;">创建</el-button>
                    <el-button @click="CancelNotice" size="medium">取消</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import {localStorage} from "js/localStorage"
export default {
    data(){
        return{
            options:[
                {value:'1',label:'常规打款'}
            ],
            ruleForm: {
                remitDate: '',
                companyId:'',
                companyName:'',
                remitBank:'',
                remitMoney:'',
                supplyId:'',
                supplyName:'',
                suppluAccount:'',
                supplyAccountName:'',
                remitType:'',
                approveId:'',
                approveIdea:'',
                approveStatus:'',
                name:'',
                date:''
            },
            rules:{
                name: [
                    { required: true, message: '请输入品牌', trigger: 'blur' },
                ],
            }
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirmNotice()
                }else{
                    return false;
                }
            });
        },
        drag(e){
            // var oDiv=e.path[1];
            // console.log(oDiv)
            // var disX=e.clientX-oDiv.offsetLeft-50;
            // var disY=e.clientY-oDiv.offsetTop-50;
            // document.onmousemove=(e)=>{
            //     e.preventDefault()
            //     var l=e.clientX-disX;
            //     var t=e.clientY-disY;
            //     oDiv.style.left=l+'px';
            //     oDiv.style.top=t+'px';
            // }
            // document.onmouseup=()=>{
            //      document.onmousedown=null;
            //      document.onmouseup=null;
            // }
        },
        confirmNotice(){
           
        },
        CancelNotice(){
            this.$emit("closeTip")
        }
    }
}
</script>
<style scoped>
.noticeContainer .el-form-item{
    margin-bottom:14px;
}
</style>

<style lang="scss" scoped>
.noticeContainer{
    width:500px;
    height:590px;
    p{
        width:100%;
        text-align:center;
        background: #eee;
        line-height:45px;
    }
    .noticeInfomation{
        margin:10px 0;
        .el-select{
            width:300px;
        }
        .el-input{
            width:300px;
        }
    }
}
</style>


